<script lang="ts" setup>
//归档页面展示文章用模版
import { IndexShowData } from "@/api/interface";
import Image from "@/components/Black/Image.vue";
//接收数据
export interface Props {
  data: IndexShowData | undefined;
}
const props = defineProps<Props>();
//图片配置
const configImg = {
  small: "thumbnail", //106
  medium: "medium", //264
  large: "medium", //295
};
</script>
<template>
  <div v-if="data">
    <router-link
      :to="`/single/${data.id}`"
      class="result__item row-anchor"
      :key="data.id"
    >
      <picture class="viewport-picture">
        <!--
        <el-image :src="data.image.url" fit="cover" lazy></el-image>-->
        <Image :data="data.image" :config="configImg"></Image>
      </picture>
      <div class="item__content">
        <p class="item__category category_release">
          <span v-for="key in data.cat">
            {{ key.name }}
          </span>
        </p>
        <h3 class="item__headline">{{ data.title }}</h3>
        <p class="item__date">{{ data.date }}</p>
      </div>
    </router-link>
  </div>
  <div v-else>
    <el-skeleton animated :throttle="500">
      <template #template>
        <div class="result__item row-anchor">
          <picture class="viewport-picture">
            <el-skeleton-item
              variant="image"
              style="width: 100%; height: 10rem"
            />
          </picture>
          <div class="item__content">
            <p class="item__category category_release">
              <el-skeleton-item variant="text" style="width: 15%" />
            </p>
            <h3 class="item__headline">
              <el-skeleton-item variant="h3" style="width: 50%" />
              <el-skeleton-item variant="h3" style="width: 250px" />
            </h3>
            <p class="item__date">
              <el-skeleton-item variant="text" style="width: 55%" />
            </p>
          </div>
        </div>
      </template>
    </el-skeleton>
  </div>
</template>
<style lang="less" scoped>
.result__item {
  display: flex;
  justify-content: flex-start;
  margin: 0;
  border-top: 1px solid #d2d2d7;
  align-items: center;
  padding: 32px 0;
  .viewport-picture {
    align-self: flex-start;
    flex-shrink: 0;
    font-size: 0;
    :deep(img) {
      border-radius: 10px;
      width: 295px;
      height: 165px;
    }
  }
}
.item__content {
  margin-left: 32px;
}
.item__category {
  color: #6e6e73;
  font-size: 12px;
  line-height: 1.33337;
  font-weight: 700;
  letter-spacing: -0.01em;
  text-transform: uppercase;
}
.item__headline {
  font-size: 24px;
  line-height: 1.16667;
  font-weight: 700;
  letter-spacing: 0.009em;
  margin-top: 8px;
}
.item__date {
  color: #6e6e73;
  font-size: 14px;
  line-height: 1.42859;
  font-weight: 600;
  letter-spacing: -0.016em;
  margin-top: 12px;
}
@media only screen and (max-width: 1068px) {
  .result__item {
    padding: 24px 0;
    .viewport-picture {
      :deep(img) {
        width: 264px;
        height: 149px;
      }
    }
  }
  .item__content {
    margin-left: 24px;
  }
  .item__headline {
    font-size: 21px;
    line-height: 1.19048;
    font-weight: 700;
    letter-spacing: 0.011em;
  }
}
@media only screen and (max-width: 734px) {
  .result__item {
    align-items: flex-start;
    .viewport-picture {
      :deep(img) {
        width: 106px;
        height: 60px;
      }
    }
  }
  .item__content {
    margin-left: 16px;
  }
  .item__headline {
    margin-top: 4px;

    font-size: 17px;
    line-height: 1.23536;
    font-weight: 700;
  }
  .item__date {
    margin-top: 8px;

    font-size: 14px;
    line-height: 1.28577;
    font-weight: 600;
  }
}
</style>
